<template>
  <div class="bar">
    <div class="traffic">
      <div class="red" @click="close" @mousemove.stop>
        <IconConfigProvider color="rgb(142,27,18)" size="12">
          <Icon>
            <CloseFilled />
          </Icon>
        </IconConfigProvider>
      </div>
      <div class="yellow" @click="min" @mousemove.stop>
        <IconConfigProvider color="rgb(169,114,41)" size="12">
          <Icon>
            <MinusFilled />
          </Icon>
        </IconConfigProvider>
      </div>

      <div class="green" @click.stop="max" @mousemove.stop>
        <IconConfigProvider color="rgb(40,96,23)" size="12">
          <Icon>
            <AddFilled />
          </Icon>
        </IconConfigProvider>
      </div>
    </div>
    <p class="title">{{ title }}</p>
  </div>
</template>

<script>
import { AddFilled, CloseFilled, MinusFilled } from "@v2icons/material"
// import { PersonOutlineSharp } from '@v2icons/material'
import { Icon, IconConfigProvider } from "@v2icons/utils"
export default {
  props: {
    title: {
      type: String
    }
  },
  components: {
    AddFilled,
    CloseFilled,
    MinusFilled,
    Icon,
    IconConfigProvider
  },
  methods: {
    close() {
      this.$emit("close")
    },
    min() {
      this.$emit("min")
    },
    max() {
      this.$emit("max")
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../global/style/var.less";
.bar {
  position: relative;
  background-color: @--topbar-background;
  padding: 10px;
  text-align: center;
  cursor: grab;
  z-index: 100;
  min-height: 12px;
  .title {
    color: white;
  }
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;

  .traffic {
    position: absolute;
    left: 0;

    top: 50%;
    transform: translate(10px, -50%);
    display: flex;
    width: 55px;
    justify-content: space-between;
    // align-content: space-between;
    &:hover {
      transition: opacity 0.3s;
      /deep/ .xicon {
        opacity: 1;
      }
    }
    div {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      cursor: pointer;

      // flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      /deep/ .xicon {
        opacity: 0;
      }

      &.red {
        background-color: @-topbar-traffic-red;
      }
      &.yellow {
        background-color: @-topbar-traffic-yellow;
      }
      &.green {
        background-color: @-topbar-traffic-green;
      }
    }
  }
}
</style>
